<template>
  <el-dialog title="内容详细" v-model="show" center width="450px" top="70px" :append-to-body="true" :close-on-press-escape="true" :close-on-click-modal="false">
    <div class="content">{{ content }}</div>
    <div class="footer">
      <el-button  type="primary" icon="el-icon-check" size="small" v-on:click="doCopy(content)">复制</el-button>
      <el-button v-on:click="show = false" icon="el-icon-back" size="small" >关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import clipboard from "vue-clipboard3";
import { getCurrentInstance, ref } from "vue";

export default {
  data() {
    return {}
  },
  setup() {
    let show = ref(false)
    let content = ref('')

    const { proxy } = getCurrentInstance()
    const { toClipboard } = clipboard()

    // 打开对话框
    const doShow = val => {
      show.value = true
      content.value = val
    }

    // 复制处理
    const doCopy = async(val) => {
      try {
        await toClipboard(val)
        proxy.$message.success("复制成功!")
      } catch (e) {
        proxy.$message.error("复制失败，请重试!")
      }
    }
    return {
      show,
      content,
      doShow,
      doCopy
    }
  }
}
</script>

<style scoped lang="scss">
.content {
  padding: 0 10px 20px 10px;
}
</style>
